<template>
  <div>
    <Dialog
      v-model="visible"
      title="批量修改分类"
      width="600px"
      close-on-click-modal
      destroy-on-close
      @close="visible = false"
    >
      <div>
        <el-form ref="formRef" :rules="rules" :model="form">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column label="">
              <template #default="scope">
                <div>{{ scope.row.title }} </div>
              </template>
            </el-table-column>
            <el-table-column label="分级">
              <template #default>
                <div>
                  <el-form-item required prop="handLevel">
                    <el-select v-model="form.handLevel" clearable placeholder="请选择分级">
                      <el-option
                        v-for="(level, levelIndex) in levelList"
                        :key="levelIndex"
                        :label="level.levelName"
                        :value="level.levelCode"
                      />
                    </el-select>
                  </el-form-item>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="重要程度">
              <template #default>
                <div>{{ form.handImportance || '重要数据' }}</div>
              </template>
            </el-table-column>
          </el-table>
          <div class="mt-12px w-100% text-right">
            <el-text>
              <el-icon>
                <Warning />
              </el-icon>
              若手动调整，则最终分类分级以手动调整后的结果为准
            </el-text>
          </div>
          <el-form-item label="敏感期限" required prop="sensitiveDeadline" class="mt-12px">
            <el-radio-group v-model="form.sensitiveDeadline">
              <el-radio label="1" key="1">默认期限</el-radio>
              <el-radio label="2" key="2">指定期限</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-row>
            <el-form-item
              label="期限时间"
              required
              prop="deadlineTimeNum"
              v-if="form.sensitiveDeadline === '2'"
            >
              <ns-input
                v-model="form.deadlineTimeNum"
                clearable
                type="number"
                placeholder="请输入整数时长"
                class="flex-1"
              />
            </el-form-item>
            <el-form-item required prop="deadlineTimeUnit" v-if="form.sensitiveDeadline === '2'">
              <el-select
                v-model="form.deadlineTimeUnit"
                placeholder="请选择时间单位"
                class="ml-12px flex-1"
              >
                <el-option
                  v-for="item in timeUnitOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-row>
          <el-form-item
            label="到期后敏感级别"
            prop="deadlineLevel"
            required
            v-if="form.sensitiveDeadline === '2'"
          >
            <el-select v-model="form.deadlineLevel" clearable placeholder="请选择分级">
              <el-option
                v-for="(level, levelIndex) in levelList"
                :key="levelIndex"
                :label="level.levelName"
                :value="level.levelCode"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="confirm"> 确定 </el-button>
        </span>
      </template>
    </Dialog>
  </div>
</template>

<script setup lang="tsx">
import { Warning } from '@element-plus/icons-vue'
import { assetUpdateLevelList } from '@/api/assetDetail'
import { levelPage } from '@/api/strategyManage/level/index'
import dayjs from 'dayjs'
const message = useMessage() // 消息弹窗
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  ids: {
    type: Array
  }
})

const emit = defineEmits(['update:modelValue', 'success'])
const visible = computed({
  get() {
    return props.modelValue
  },
  set(newValue) {
    emit('update:modelValue', newValue)
  }
})

const levelOptions = [
  {
    label: '一级',
    value: '1'
  },
  {
    label: '二级',
    value: '2'
  },
  {
    label: '三级',
    value: '3'
  },
  {
    label: '四级',
    value: '4'
  },
  {
    label: '五级',
    value: '5'
  }
]

const timeUnitOptions = [
  {
    label: '年',
    value: '年'
  },
  {
    label: '月',
    value: '月'
  },
  {
    label: '日',
    value: '日'
  }
]

const formRef = ref()
const rules = {
  sensitiveDeadline: [{ required: true, message: '敏感期限不能为空', trigger: 'blur' }],
  deadlineTimeNum: [{ required: true, message: '时长不能为空', trigger: 'blur' }],
  deadlineTimeUnit: [{ required: true, message: '时间单位不能为空', trigger: 'change' }],
  deadlineTime: [{ required: true, message: '期限时间不能为空', trigger: 'blur' }],
  deadlineLevel: [{ required: true, message: '到期后敏感级别不能为空', trigger: 'change' }],
  handLevel: [{ required: true, message: '分级不能为空', trigger: 'blur' }]
}
const form = ref({
  handLevel: '',
  handImportance: '',
  sensitiveDeadline: '1',
  deadlineTime: '',
  deadlineLevel: '',
  deadlineTimeNum: '',
  deadlineTimeUnit: ''
})
const tableData = [
  {
    title: '手动调整'
  }
]

const confirm = async () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      console.log('form.ids', props.ids)
      const data = await assetUpdateLevelList({ ids: props.ids, ...form.value })
      console.log('data', data)
      if (data) {
        message.success('修改成功')
        visible.value = false
        emit('success')
      }
    }
  })
}

const levelList = ref([])
const getLevelList = async () => {
  const { data } = await levelPage({ page: 1, pageSize: 999 })
  console.log('data', data)
  levelList.value = data
}

watch(
  () => form.value.handLevel,
  (newValue) => {
    console.log('newValue', newValue)
    const levelItem = levelList.value.find((item) => item.levelCode == newValue)
    console.log('levelItem', levelItem)
    if (levelItem) {
      form.value.handImportance = levelItem.importance
    }
  }
)

onMounted(() => {
  getLevelList()
})
</script>
<style scoped lang="scss">
:deep(.el-table .el-form-item--default) {
  margin-bottom: 0 !important;
}
</style>
